<template>
	<div style="padding: 20px;">
		<div>
			<el-form inline :model="formData" class="Fileform">
				<el-form-item label="文件名称">
					<el-input v-model="formData.fileName" placeholder="请输入文件名称" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<UploadFileF ref="AnotherData" :multiple="true" :another-data="AnotherData" :showfilelist="true" :CallbackFun="getTableData"
				:upshow="true" content="上传文件" btnsize="medium"></UploadFileF>
		</div>
		<div class="FileTable">
			<el-row>
				<el-col :span="24">
					<el-table :data="FileCatalogueList" border>
						<el-table-column type="index" label="序号" width="50" align="center"
							:index="indexMethod"></el-table-column>
						<el-table-column label="名称" align="center" prop="FileName"></el-table-column>
						<el-table-column label="大小" align="center" prop="Size"></el-table-column>
						<el-table-column label="时间" align="center" prop="Date"></el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button type="text" @click="DownUserId(scope.row)">下载</el-button>
								<el-popconfirm confirm-button-text='确定' style="margin-left: 10px;"
									cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="你确定要删除吗?"
									@confirm="DeleteFileByUrl_Event(scope.row)">
									<el-button type="text" style="color: #F56C6C;" slot="reference"
										size="mini">删除</el-button>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>

			<!-- 			<el-row>
				<el-col :span="24" align="right">
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row> -->
		</div>
	</div>
</template>

<script>
	import * as publicjs from "../../public/Scriput/Public"
	import UploadFileF from "./UploadFileF"
	export default {
		components: {
			UploadFileF
		},
		data() {
			return {
				formData: {
					fileName: '',
				},
				AnotherData: {
					//项目模块
					FileType: publicjs.UpLoadFileType.tongyongwenjian,
					//项目Id号
					id: 0,
					//Type
					Type: 0,
					Single: false,
				},
				approvevisible: false,
				FileCatalogueList: [],
				//分页数据绑定
				pagination: {
					currentPage: 1,
					pagesizes: [10, 20, 30, 40, 50],
					pagesize: 10,
					total: 0
				},
			}
		},
		created() {
			publicjs.http(this.$http, this.$message)
		},
		mounted() {
			this.getTableData()
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			//获取表格数据
			getTableData() {
				this.$http.post('StaticFile/StaticFileByName', {
					fileName: this.formData.fileName
				}).then(res => {
					const {
						StatusCode,
						Data,
						TotalCount
					} = res.data || 0
					if (StatusCode == 200) this.FileCatalogueList = Data
					else this.FileCatalogueList = []
				})
			},
			//删除
			DeleteFileByUrl_Event(row) {
				const {
					Url
				} = row || ''
				if (Url != '') {
					this.$http.post('StaticFile/DeleteFileByUrl', {
						filePath: row.Url
					}).then(res => {
						const {
							StatusCode
						} = res.data || 0
						if (StatusCode == 200) {
							this.$message.success('删除成功!')
							this.getTableData()
						} else this.$message.warning('删除失败,请重试!')
					})
				}
			},
			//下载文件
			DownUserId(row) {
				let Data = {
					id: 0,
					FileType: publicjs.UpLoadFileType.tongyongwenjian,
					Type: 0,
					FileName: row.FileName,
				}
				//文件下载
				publicjs.DownLoadFile({
					...Data
				})
			},
		}
	}
</script>

<style scoped>
	.Fileform .el-form-item {
		margin-bottom: 10px;
	}

	.FileTable {
		margin-top: 10px;
	}
</style>